<template>
	<view class="wrap">
		<view class="content">
			<view class="logo-box">
				<image class="logo" src="/static/login/logo.png"></image>
			</view>

			<view class="input-con">
				<view class="input-con-row name-box">
					<image class="input-icon" src="/static/login/ic_id.png"></image>
					<input placeholder='请输入账号' id="login-input" v-model="phone" />
				</view>

				<view class="input-con-row password-box">
					<image class="input-icon" src="/static/login/password.png"></image>
					<input id="login-pwd" type="text" maxlength="20" :password="passwords" placeholder="请输入密码" v-model="password" />
				</view>

				<view class="checkbox-box">
					<checkbox-group @change="checkboxChange">
						<label>
							<checkbox class="checkbox" :checked="rememberMe" />记住密码
						</label>
					</checkbox-group>
				</view>
			</view>

			<view class="btn-con">
				<button class="btn-login" @tap="submit">登录进去</button>
				<button class="btn-ty" @tap="jump">在线体验</button>
			</view>
		</view>

		<image class="bot-bg" src="/static/login/bg.png"></image>

		<text class="xieyi">登录即同意相关协议。</text>
	</view>
</template>

<script>
	import {
		checkPhone,
		checkPwd
	} from "@/common/common.js"
	import {
		GetObjProperty,
	} from "@/common/common.js"

	export default {
		data() {
			return {
				phone: '',
				password: '',
				passwords: true,
				rememberMe: true,
			}
		},
		methods: {
			checkboxChange(e) {
				this.rememberMe = !this.rememberMe
			},
			jump() {
				uni.request({
					url: "http://114.215.179.225:9001/yg-account/api/smallProgram/getExperienceUser",
					method: "GET",
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						if (resData.code === 200 && resData.success) {
							let data = GetObjProperty(resData, "data")

							this.login(data, true)
						}
					}
				})
			},
			submit() {
				if (!this.phone) {
					uni.showToast({
						title: '账号不能为空',
						icon: 'none',
					})
					return;
				};
				if (!this.password) {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none',
					})
					return;
				};

				this.login()
			},
			login(params = {}, isShow = false) {
				uni.showLoading({
					title: "登录中...",
				})
				uni.request({
					url: "http://114.215.179.225:9001/yg-account/api/smallProgram/login",
					method: "POST",
					data: {
						loginName: params.loginName || this.phone,
						password: params.password || this.password,
						rememberMe: this.rememberMe,
					},
					complete() {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					},
					success: (res) => {
						let resData = res.data

						if (resData.code === 200 && resData.success) {
							uni.setStorageSync("rememberMe", isShow ? false : this.rememberMe)
							uni.setStorageSync("userInfo", JSON.stringify(resData.data))
							uni.reLaunch({
								url: '../index/index'
							})
						} else {
							uni.showToast({
								title: resData.uiMsg,
								icon: "none",
							});
						}
					}
				})
			},
		}

	}
</script>

<style scoped>
	.wrap {
		position: relative;
		width: 100%;
		height: 100vh;
	}

	.content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 100rpx;
		left: 0;
		z-index: 10;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		width: 100%;
		padding: 0 60rpx;
		box-sizing: border-box;
	}

	.logo-box {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.logo {
		width: 350rpx;
		height: 314rpx;
	}

	.input-con {
		margin: 80rpx 0;
		width: 100%;
	}

	.input-con-row {
		display: flex;
		align-items: center;
		width: 100%;
		height: 96rpx;
		padding: 0 20px;
		border: 1px solid #CFD9E6;
		border-radius: 48rpx;
		box-sizing: border-box;
	}

	.input-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 30rpx;
	}

	.password-box {
		margin: 48rpx 0;
	}

	.login-input {
		font-size: 28rpx;
		font-family: DIN;
		font-weight: 400;
		color: #2573B0;
	}

	.checkbox-box {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.checkbox {
		transform: scale(0.6);
	}

	.btn-con {
		width: 100%;
	}

	.btn-login {
		width: 100%;
		height: 96rpx;
		background-color: #2573B0;
		border-radius: 48rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 96rpx;
		color: #FFFFFF;
	}

	.btn-ty {
		width: 100%;
		height: 96rpx;
		margin-top: 48rpx;
		background-color: #E4EAF1;
		border-radius: 48rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 96rpx;
		color: #3DBCF1;
	}

	.bot-bg {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 588rpx;
	}

	.xieyi {
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		z-index: 1;
		transform: translateX(-50%);
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #7D8998;
	}
</style>
